<template>
  <div id="map"></div>
</template>

<script setup>
import { onMounted } from "vue"
import { app } from "@/main"

/* 全局参数设置 */
minemap.domainUrl = "https://minemap.minedata.cn"
minemap.dataDomainUrl = "https://minemap.minedata.cn"
minemap.serverDomainUrl = "https://sd-data.minedata.cn"
minemap.spriteUrl =
  "https://minemap.minedata.cn/minemapapi/v2.1.1/sprite/sprite"
minemap.serviceUrl = "https://service.minedata.cn/service"

minemap.key = "43d033e7f3a14c5cb5d6d8d5732dbeb1"
minemap.solution = 11001

onMounted(() => {
  var map = new minemap.Map({
    container: "map",
    style: "https://service.minedata.cn/map/solu/style/11001",
    center: [118.797466, 32.087265],
    zoom: 10,
    pitch: 0, //俯仰角
    maxZoom: 17,
    minZoom: 3,
    logoControl: false /*logo控件是否显示，不加该参数时默认显示logo*/,
    projection: "MERCATOR",
  })

  // 添加地图全屏查看控件
  map.addControl(new minemap.Fullscreen(), "bottom-right")

  /* 将地图设置为全局变量 */
  app.config.globalProperties.$map = map
})
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>
